<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="/jquery/jquery-3.6.0.js"></script>
</head>

<body>
<img class="bgone" src="img/1.jpg" />
<img class="pic" src="img/a.png" />

<div class="table">
	<div class="wel">夏令营技术研发平台登录</div>
	<div class="wel1">MOU MOU XI TONG HUO TAI DENG LU</div>
	<div class="user">
		<div id="yonghu" style=""><img src="img/yhm.png" /></div>
		<input type="text" name="" id="username" placeholder="用户名" />
	</div>			
	<div class="password">
		<div id="yonghu"><img src="img/mm.png" /></div>
		<input type="password" name="密码" id="password" placeholder="●●●●●●"/>
	</div>
	<input class="btn" type="button" id="loginButton" name="登录" value="登录" />
	<hr/>
	<input type="button" id="AIButton" name="人脸登录" value="人脸登录" />
</div>

</body>
<script>
	$("#AIButton").click(function () {
		window.location.href='/ai_login.html';
	});
	
	
	/**
	 localstorage    缓存    永久性存储
	 sessionstorage  缓存    单页面存储


	 */
	$("#loginButton").click(function () {
		let username = $("#username").val();
		if(username == null || username == '') {
			alert("请输入用户名！");
			return;
		}
		let password = $("#password").val();
		if(password == null || password == '') {
			alert("请输入密码！");
			return;
		}
		$.ajax({
			url:"/user/login",           // 请求路径
			type:"post",                  // 请求的方式，不区分大小写
			cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
			data: {
				username:username,
				password:password
			},  // {'username':'admin12', 'password':'123456'}
			datatype:"json",        // 返回类型，text文本、html页面、json数据
			success:function(response){
				console.log("返回: " + response);
				if(response.code === 200) {
					alert("登录成功!");
					// 在当前页中存储用户的登录数据
					// sessionStorage.setItem("user", JSON.stringify(response.data));   // Storaged缓存只能存储字符串内容，不能存储对象内容
					localStorage.setItem("user", JSON.stringify(response.data));   // Storaged缓存只能存储字符串内容，不能存储对象内容
					// sessionStorage只存在与当前页面窗口中，并且用户关闭窗口，数据就会丢失
					// localStorage存在与整个浏览器中，用户关闭窗口，不会丢失，只能用户手动清除缓存，才会丢失
					// 从当前页面切换到index页面
					window.location.href="/index.html";
				}
				else {
					alert(response.msg);
				}
			},
			error:function(response){
				console.log("出错返回: " + response);
			}
		});
	});
</script>
</html>